<template>

<el-dialog
	v-model="add_material_visible"
	:title=" title_string "
	:close-on-click-modal='false'
	:close-on-press-escape='false'
	:show-close='false'
>
	<el-form :model="add_material_variable" :rules="add_material_rules" ref="add_material_ref"
           :label-position=" 'right' " label-width="150px">

		<el-form-item prop="material_group_id" label="物料分组">
			<FuzzySearchMaterialGroup @DataUse="big_auto_complete_in_small_dialog($event as any)"
											ref="select_material_group_ref"
											:disable="false"
											:content=" '' "
											@DataClear="material_group_clear"/>
		</el-form-item>
		<el-form-item prop="code" label="物料编码">
			<el-input v-model="add_material_variable.code" autocomplete="off"/>
		</el-form-item>
		<el-form-item prop="material_name" label="物料名称">
			<el-input v-model="add_material_variable.material_name" autocomplete="off"/>
		</el-form-item>
		<el-form-item prop="model" label="物料型号">
			<el-input v-model="add_material_variable.model" autocomplete="off"/>
		</el-form-item>
		<el-form-item prop="set_piece" label="件支数">
      <el-input-number v-model="add_material_variable.set_piece" autocomplete="off" :min="1" :step="1" step-strictly>
      </el-input-number>
		</el-form-item>
    <el-form-item prop="theory_scatt_weight" label="单支重量/吨">
      <el-input-number v-model="add_material_variable.theory_scatt_weight" autocomplete="off" :min="0" :step="0.001" step-strictly>
      </el-input-number>
    </el-form-item>
	</el-form>
	<template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel_add_material(add_material_ref)">取消</el-button>
				<el-button type="primary" @click="add_or_update_material(add_material_ref)">确定</el-button>
      </span>
	</template>
</el-dialog>

</template>

<script setup lang="ts">
import {nextTick, reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {req_material_create, req_material_update} from "@/api/inventory/material";
import {MaterialCRUDResp, MaterialList} from "@/api/inventory/material/type.ts";
import {MaterialGroupCompletion} from "@/components/inventory/FuzzySearchMaterialGroup.vue";
import FuzzySearchMaterialGroup from "@/components/inventory/FuzzySearchMaterialGroup.vue";

// 控制某些项目是否显示



const add_material_ref = ref<FormInstance>()
const select_material_group_ref = ref()

const title_string = ref('')

// 清空添加框内的内容后
const material_group_clear = () => {
	add_material_variable.material_group_id = null
}
// 添加和修改所需携带变量
const add_material_variable = reactive<{
	material_group_id: number | null
  material_id: number | null
  code: string | null
  material_name: string | null
  model: string | null
  set_piece: number | null
  theory_scatt_weight: number | null
}>({
  material_group_id: null,
  material_id: null,
  code: null,
  material_name: null,
  model: null,
  set_piece: 1,
  theory_scatt_weight: 0,
})

const add_material_visible = ref(false) // 决定添加和修改框是否显示
const add_material_rules = reactive<FormRules>({
  material_group_id: [{
		type: 'number',
		message: '请选择所属分类',
		required: true,
	}],
	code: [{
		type: 'string',
		message: '物料编码需要在1到100个字符之间',
		max: 100,
		min: 1,
		required: true,
	}],
	material_name: [{
		type: 'string',
		message: '物料名称需要在1到100个字符之间',
		max: 100,
		min: 1,
		required: true,
	}],
	model: [{
		type: 'string',
		message: '物料型号需要在1到100个字符之间',
		max: 100,
    required: true,
		min: 1
	}],
  set_piece: [{
		type: 'number',
		message: '件支数需要是数字',
		required: true,
    min: 1,
	}],
  theory_scatt_weight: [{
    type: 'number',
    message: '重量需要是数字，且最多三位小数',
    required: true,
    min: 0,
    max: 99999999,
  }],
  actual_date: [{
    type: 'date',
    message: '请选择日期',
    required: true,
  }]
})

// 关闭添加小类框
const cancel_add_material = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
	add_material_visible.value = false
}

const open = (row: MaterialList | null, title: '添加' | '修改') => {
  title_string.value = title + '物料'
  if (title === '修改' && row !== null) {
    add_material_variable.material_group_id = row.material_group_id
    add_material_variable.material_id = row.id
    add_material_variable.code = row.code
    add_material_variable.material_name = row.name
    add_material_variable.model = row.model
    add_material_variable.set_piece = row.set_piece
    add_material_variable.theory_scatt_weight = row.theory_scatt_weight as number
    nextTick(()=>{
      select_material_group_ref.value?.make_input_value(row.material_group_name)
    })
  }else{
    nextTick(()=>{
      add_material_variable.material_group_id = null
      add_material_variable.material_id = null
      add_material_variable.code = null
      add_material_variable.material_name = null
      add_material_variable.model = null
      add_material_variable.set_piece = 1
      add_material_variable.theory_scatt_weight = 0
      nextTick(()=>{
        select_material_group_ref.value?.make_input_value('')
      })
    })
  }
	add_material_visible.value = true
}

defineExpose({open});

// 在添加小类框中选择其所属大类
const big_auto_complete_in_small_dialog = (cmy: MaterialGroupCompletion) => {
	add_material_variable.material_group_id = cmy.id
}

const refresh = () => {
  emit('refresh_func')
}
const emit = defineEmits(['refresh_func'])

// 添加小类
const add_or_update_material = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (title_string.value === '添加物料') {
        req_material_create({
          mode: "create",
          param: {
            code: add_material_variable.code as string,
            material_name: add_material_variable.material_name as string,
            model: add_material_variable.model as string,
            group: add_material_variable.material_group_id as number,
            set_piece: add_material_variable.set_piece as number,
            theory_scatt_weight: add_material_variable.theory_scatt_weight as number,
          }
        }).then((res: MaterialCRUDResp<'create'>)=>{
          ElMessage.success(res.success?.message)
        })
      }else{
        req_material_update({
          mode: "update",
          param: {
            id: add_material_variable.material_id as number,
            code: add_material_variable.code as string,
            name: add_material_variable.material_name as string,
            model: add_material_variable.model as string,
            group: add_material_variable.material_group_id as number,
            set_piece: add_material_variable.set_piece as number,
            theory_scatt_weight: add_material_variable.theory_scatt_weight as number,
          }
        }).then((res: MaterialCRUDResp<'update'>)=>{
          ElMessage.success(res.success?.message)
        })
      }
      add_material_visible.value = false
      refresh()
    }
  })
}
</script>

<style scoped>

</style>